package com.tencent.compose.sample.caniuse

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.huawei.compose.caniuse.canIUse

/**
 * CanIUse 能力检测演示页面
 */
@Composable
fun CanIUseDemo(onBackClick: () -> Unit) {
    var result by remember { mutableStateOf("点击按钮开始检测") }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("CanIUse 能力检测演示") },
                navigationIcon = {
                    IconButton(onClick = onBackClick) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "返回"
                        )
                    }
                },
                backgroundColor = MaterialTheme.colors.primaryVariant,
                contentColor = MaterialTheme.colors.onPrimary
            )
        }
    ) { paddingValues ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            item {
                // 介绍卡片
                Card(
                    modifier = Modifier.fillMaxWidth(),
                    backgroundColor = MaterialTheme.colors.primary.copy(alpha = 0.1f),
                    elevation = 0.dp
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp)
                    ) {
                        Text(
                            text = "关于 CanIUse",
                            style = MaterialTheme.typography.h6,
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colors.primary
                        )
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(
                            text = "CanIUse 是一个用于检测鸿蒙设备系统能力的工具。通过检测不同的 SystemCapability，可以判断设备是否支持特定功能。在 Android/iOS 上总是返回 false。",
                            style = MaterialTheme.typography.body2,
                            color = MaterialTheme.colors.onSurface.copy(alpha = 0.7f)
                        )
                    }
                }
            }

            item {
                Text(
                    text = "能力检测示例",
                    style = MaterialTheme.typography.h6,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp)
                )
            }

            // 按钮1：检测基础ArkUI能力
            item {
                CapabilityCheckButton(
                    title = "检测基础ArkUI能力",
                    subtitle = "SystemCapability.ArkUI.ArkUI.Full",
                    backgroundColor = Color(0xFF00b42a),
                    onClick = {
                        val isAvailable = canIUse("SystemCapability.ArkUI.ArkUI.Full")
                        result = if (isAvailable) {
                            "✅ 基础ArkUI能力：可用"
                        } else {
                            "❌ 基础ArkUI能力：不可用"
                        }
                    }
                )
            }

            // 按钮2：检测屏幕时间守护能力
            item {
                CapabilityCheckButton(
                    title = "检测屏幕时间守护能力",
                    subtitle = "SystemCapability.ScreenTimeGuard.GuardService\n预期5.0不可用, 6.0可用",
                    backgroundColor = Color(0xFFf53f3f),
                    onClick = {
                        val isAvailable = canIUse("SystemCapability.ScreenTimeGuard.GuardService")
                        result = if (isAvailable) {
                            "✅ 屏幕时间守护：可用"
                        } else {
                            "❌ 屏幕时间守护：不可用"
                        }
                    }
                )
            }

            // 按钮3：检测多模输入能力
            item {
                CapabilityCheckButton(
                    title = "检测多模输入能力",
                    subtitle = "MultimodalInput.Input.Core",
                    backgroundColor = Color(0xFF165DFF),
                    onClick = {
                        val isAvailable = canIUse("SystemCapability.MultimodalInput.Input.Core")
                        result = if (isAvailable) {
                            "✅ 多模输入能力：可用"
                        } else {
                            "❌ 多模输入能力：不可用"
                        }
                    }
                )
            }

            // 按钮4：检测图形渲染能力
            item {
                CapabilityCheckButton(
                    title = "检测图形渲染能力",
                    subtitle = "Graphic.Graphic2D.NativeDrawing",
                    backgroundColor = Color(0xFFFF7D00),
                    onClick = {
                        val isAvailable = canIUse("SystemCapability.Graphic.Graphic2D.NativeDrawing")
                        result = if (isAvailable) {
                            "✅ 图形渲染能力：可用"
                        } else {
                            "❌ 图形渲染能力：不可用"
                        }
                    }
                )
            }

            // 结果显示卡片
            item {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp),
                    backgroundColor = MaterialTheme.colors.surface,
                    elevation = 4.dp
                ) {
                    Column(
                        modifier = Modifier.padding(20.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(
                            text = "检测结果",
                            style = MaterialTheme.typography.subtitle1,
                            fontWeight = FontWeight.Bold,
                            color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f)
                        )
                        Spacer(modifier = Modifier.height(12.dp))
                        Text(
                            text = result,
                            fontSize = 18.sp,
                            color = Color(0xFFDB7093),
                            fontWeight = FontWeight.Medium
                        )
                    }
                }
            }

            // 说明卡片
            item {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp),
                    backgroundColor = Color(0xFFFFF7E6),
                    elevation = 0.dp
                ) {
                    Column(
                        modifier = Modifier.padding(16.dp)
                    ) {
                        Text(
                            text = "💡 使用说明",
                            style = MaterialTheme.typography.subtitle2,
                            fontWeight = FontWeight.Bold,
                            color = Color(0xFFD46B08)
                        )
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(
                            text = "• 点击上方按钮检测不同的系统能力\n" +
                                   "• 在鸿蒙平台上会调用原生 ArkTS canIUse 接口\n" +
                                   "• 在 Android/iOS 平台上总是返回 false\n" +
                                   "• 系统能力检测结果在运行时是固定的，不会动态变化",
                            style = MaterialTheme.typography.body2,
                            color = Color(0xFFD46B08).copy(alpha = 0.8f),
                            lineHeight = 20.sp
                        )
                    }
                }
            }
        }
    }
}

/**
 * 能力检测按钮组件
 */
@Composable
private fun CapabilityCheckButton(
    title: String,
    subtitle: String,
    backgroundColor: Color,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(80.dp),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = backgroundColor
        )
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = title,
                color = Color.White,
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = subtitle,
                color = Color.White.copy(alpha = 0.9f),
                fontSize = 12.sp
            )
        }
    }
}
